<template>
    <div id="activityType">
        <div class="topi">
           
            <el-button @click="dialogFormVisible = true" type='primary'>添加类型</el-button>
        </div>
         <el-table :data="tableData" border  style="width: 100%">
            <el-table-column v-for="col in tableCols" :key="col.id"  :prop="col.prop"
            :label="col.label">
            </el-table-column>
            <el-table-column  label="操作"  align="center" width="172">
                <template slot-scope="scope">
                  <el-button type="text" size="normally"  @click="delItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination class="pageinfo" background layout="total, prev, pager, next" :page-size='limit'
          @current-change='changeCurrentPage'
          :total="totals">
        </el-pagination>
     

        <el-dialog title="添加类型" width='32%' :visible.sync="dialogFormVisible" center>
        <el-form :model="form" label-width='120px' >
            <el-form-item label="类型名" >
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" >
                <el-input v-model="form.detail" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addType">提交</el-button>
        </div>
        </el-dialog>
    </div>
 
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        tableCols: [
            {id: 1, prop: 'typeId', label: 'id'}, {id: 2, prop: 'title', label: '类型名'}, {id: 3, prop: 'detail', label: '描述'}
        ],
        dialogFormVisible: false,
        form: {
          title: '', detail: ''
        },
        currentPage: 1,
        totals: 0,
        limit: 10
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
        editAdmin() {

        },
        delItem(row) {
            let param = {
              typeId: Number(row.typeId)
            }
            this.$api.delActivityType(param, res => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.getTableData()
            })
        },
        addType() {
          if(this.form.title == '' || this.form.detail == '') {
            this.$message({
              type: 'warning',
              message: '请填写完整'
            })
            return
          }
          this.$api.addActivityType(this.form, res => {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.dialogFormVisible = false
                this.getTableData()
          })
        },
        changeCurrentPage(page) {
          this.currentPage = page
          this.getTableData()
        },
        getTableData() {
          let param = {
            page: this.currentPage,
            limit: this.limit
          }
          this.$api.viewActivityList(param, res => {
              this.tableData = res.data
              this.totals = res.pageInfo.total
          })
        }
    },
    mounted() {
      this.getTableData()
    }
  }
</script>
<style lang="scss">
#activityType {
  .topi {
        display: flex;
        width: 80%;
        margin-bottom: 20px;
        .el-input {
            width: 40%;
            margin-left: 30px;
            margin-right: 100px
        }
    }
}
    
</style>
